import { PageContainer } from '@ant-design/pro-layout';
import { Button, message, Spin } from 'antd';
import ProTable from '@ant-design/pro-table';
import React, { useState, useRef } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { exportFile, momentNow } from '@/utils/utils';
import {findSettlementStatistic,exportSettlementStatistic} from './service'

export default (() => {

  const actionRef = useRef<ActionType>();
  const [spinningFlag,setSpinningFlag]  = useState(false);
  const columns: ProColumns[] = [
    {
      title: '客户代码',
      dataIndex: 'dealerCode',
      width: 100,
   },
   {
    title: '客户名称',
    dataIndex: 'dealerName',
    width: 150,
    ellipsis:true,
    },
    {
      title: '服务商名称',
      dataIndex: 'serviceName',
      ellipsis:true,
      width: 120,
    },
    {
      title: '订单号',
      dataIndex: 'orderNumber',
      ellipsis:true,
      width: 110,
    },
    {
      title: '订单日期',
      dataIndex: 'orderTime',
      valueType:'date',
      hideInSearch:true,
      width: 100,
    },
    {
      title:'订单日期',
      dataIndex: 'oTime',
      valueType:'dateRange',
      hideInTable:true,
      width:150,
      ellipsis:true,
    },
    {
      title: '订单总金额',
      dataIndex: 'totalAmount',
      hideInSearch:true,
      width: 120,
      valueType:'money',
    },
    {
      title: '订单备注',
      dataIndex: 'remark',
      ellipsis:true,
      width: 100,
      hideInSearch:true,
    },
    {
      title: '产品名称',
      dataIndex: 'productName',
      ellipsis:true,
      width: 100,
    },
    {
      title: '产品型号',
      dataIndex: 'productStandard',
      ellipsis:true,
      width: 100,
    },
    {
      title: '产品数量',
      dataIndex: 'orderNum',
      width: 80,
      hideInSearch:true,
    },
    {
      title: '订单单价',
      dataIndex: 'price',
      width: 120,
      valueType:'money',
      hideInSearch:true,
    },
    {
      title: '订单总价',
      valueType:'money',
      hideInSearch:true,
      dataIndex: 'totalPrice',
      width: 120,
    },
  ];
  return <PageContainer>
    <ProTable actionRef={actionRef}  scroll={{x:1200}}
    search={{
      span: 6,
      defaultCollapsed: false,
      optionRender: ({
        searchText,
        resetText
      }, {
        form
      }) => [<Button key='search' type='primary' onClick={() => {
        form?.submit();
      }} >
              {searchText}
            </Button>, <Button key='rest' onClick={() => {
        form?.resetFields();
        form?.submit();
      }}>
              {resetText}
            </Button>, <Button type='primary' key='import' onClick={async () => {
              setSpinningFlag(true);
              var oTime = form?.getFieldValue("oTime");
              var params:any={};
              if(oTime){
                params.orderBeginTime=oTime[0].format('YYYY-MM-DD');
                params.orderEndTime=oTime[1].format('YYYY-MM-DD');
                params.oTime=undefined;
              }
              params.dealerCode=form?.getFieldValue("dealerCode");
              params.dealerName= form?.getFieldValue("dealerName");
              params.serviceName= form?.getFieldValue("serviceName");
              params.orderNumber= form?.getFieldValue("orderNumber");
              params.settlementStatus= form?.getFieldValue("settlementStatus");
              params.productName= form?.getFieldValue("productName");
              params.productStandard= form?.getFieldValue("productStandard");
              params.settlementStatus = 1
              params.settled = false
              var val = await exportSettlementStatistic(params);
              if(val.errorCode==='200'){
                exportFile(val.data,'发货单.xlsx')
              }else{
                message.error(val.errorMessage);
              }
              setSpinningFlag(false);
      }}>
            导出
        </Button>]
    }}
    toolbar={{
      settings: []
    }}

       pagination={{
      pageSizeOptions: ['20', '100', '500']
    }} 
    request ={async(params, sorter, filter) => {
      if(params.oTime&&params.oTime.length>0){
        params.orderBeginTime = params.oTime[0]
        params.orderEndTime = params.oTime[1]
        params.oTime = undefined;
      }
      params.settlementStatus = 1
      params.settled = false
      return findSettlementStatistic({ ...params, sorter, filter })
    }}    columns={columns} rowKey='id'/>
   <Spin spinning={spinningFlag} style={{transform:'translate(-50%,-50%)',left:'50%',top:'50%',position:'absolute'}}/>

  </PageContainer>;
});